<script>
  let { options, index } = $props();

  const onkeydown = (ev) => {
    // TODO: support custom controls
    if (ev.key === 'ArrowUp') {
      const newIx = Math.max(0, index-1);
      index = newIx;
    } else if (ev.key === 'ArrowDown') {
      const newIx = Math.min(options.length-1, index+1);
      index = newIx;
    }
  };

  const selectedClass = (ix) => {
    if (ix === index) {
      return 'selectable-selected';
    }
    return '';
  };

  const select = (ix) => {
    index = ix;
  };
</script>

<ul tabindex="0" {onkeydown}>
  {#each options as option, ix}
    <li class="selectable {selectedClass(ix)}" onclick={() => select(ix)}>
      {option.name}
    </li>
  {/each}
</ul>

<style>
  .selectable {
    list-style-type: none;
  }

  .selectable:hover {
    background-color: #999;
  }

  .selectable-selected {
    background-color: #bbb;
  }
</style>
